<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>添加入库单</title>
		<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/form.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/jquery-ui.css" />
		<link rel="stylesheet" href="../../css/ztree/zTreeStyle.css" type="text/css">
		
		<style>
			.editBlue{
				color: blue;
			}
			/**
 * 产品编号弹框
 */
.org_window {
		width: 400px;
		height: 300px;
		text-align: center;
		position: absolute;
		top: 35%;
		left: 45%;
		margin-left: -150px;
		margin-top: -100px;
		background: rgb(245, 245, 245);
		border: 1px solid rgb(200, 200, 200);
		box-shadow: 5px 5px 5px rgb(100, 100, 100);
	}
	
	.org_window p {
		text-align: center;
		height: 30px;
		background: rgb(68, 161, 248);
		line-height: 30px;
		color: white;
		margin-bottom: 10px;
	}
	.td_with {
		width: 243px;
	}
			
		</style>
	</head>
	<body>
		<!-- 蓝色背景区域 -->
		<div class="wrap">
			<!-- 白色可用区域 -->
			<div class="canuse">
				<!------ 位置 ------>
	            <p class="contentText local"><span>位置：库存日常管理 > 入库管理 > 添加物料入库单</span></p>
		    	<div class="article_list" style="width: 98.5%; margin: 0px auto;">
		            <!------- 内容 ------->
		            <div class="content content1">
		            	<!-- 用户列表内容区 -->
		                <div class="con con_01">
		                    <!-- 表单信息填写区 -->
		                    <h4 class="sel_title"><img src="../../img/list/brand1.png" /><span>新建物料入库单</span></h4>
		                    <div class="write_area">
		                        <form id="addFrom" action="" method="post">
		                            <table class="contentText" border="1" cellspacing="0" cellpadding="0" width="99%" style="margin-bottom: 10px;">
		                                <tbody>
		                                    <tr>
		                                        <th>ERP来料单号：</th>
		                                        <td><input type="text" name="" value="" /></td>
												<th>入库单号：</th>
		                                        <td><input type="text" name="" value="RKDH20180910180015" /></td>
		                                        <th>入库日期：</th>
		                                        <td><input type="text" name="" value="2020-02-10" /></td>
		                                    </tr>
		                                    <tr>
		                                        <th>入库类型：</th>
		                                        <td><select><option>齐套补料入库</option><option>生产退料入库</option><option>其他入库</option></select></td>
												<th>产品代号：</th>
		                                        <td><input type="text" name="" value="" /></td>
												<th>零部件代号：</th>
		                                        <td><input type="text" name="" value="" /></td>
		                                        
		                                    </tr>
											<tr>
												<th>计划号：</th>
		                                        <td><input type="text" name="" value="" /></td>
		                                        <th>制单人：</th>
		                                        <td><input type="text" name="" value="" /></td>
		                                    </tr>
		                                </tbody>
		                            </table>
		                        </form>
		                    </div>
		                </div>
						<!-- 列表展示区 -->
						<div class="table_border">
			                <div class="show_list">
			                	<div class="title_operate">
			                    	<h4 class="sel_title"><img src="../../img/list/brand1.png" /><span>物料入库单详情</span></h4>
			                		
			                        <!-- 操作类型区 -->
			                        <div class="operate_area" id="addOperate">
			                            <a id="addDetail" onclick="addDetail()" class="bgd_add img_hand">增加</a> 
			                            <a id="deleteDetail" onclick="deleteDetail()" class="bgd_delete img_hand">删除</a> 
			                        </div>
			                	</div>
			                	<div class="list_area">
			                        <!-- 信息列表区 -->
			                        <div class="info_area">
			                            <table class="tablelist" border="1" cellspacing="0" cellpadding="0">
			                                <tbody>
			                                    <tr class="menuText list_head">
			                                    	<th class="checkSelectAll"></th>
			                                        <th class="">序号</th>
			                                        <th class="">物料编码</th>
			                                        <th class="">物料名称</th>
			                                        <th class="">物料类型</th>
			                                        <th class="">规格型号</th>
			                                        <th class="">计量单位</th>
			                                        <th class="">数量</th>
			                                        <th class="">仓库</th>
			                                        <th class="">库位</th>
			                                        <th class="">合格证编号</th>
			                                        <th class="">失效日期</th>
													<th class="">批次号</th>
													<th class="">物料用途</th>
													<th class="">替代料</th>
			                                        <th class="">二维码打印</th>
			                                    </tr>
			                                </tbody>
			                                <tbody class="tablelist" id="addTr">
			                                    <tr class="listTableText list_list">
			                                        <td><input type="checkbox" class="input_checkBox" name="" id="" value=""></td>
			                                        <td>1</td>
			                                        <td><input style="width: 100px;" type="text" name="" value="" /></td>
			                                        <td><input style="width: 100px;" type="text" name="" value="" readonly="readonly"/></td>
			                                        <td><input style="width: 100px;" type="text" name="" value="" readonly="readonly"/></td>
			                                        <td><input style="width: 100px;" type="text" name="" value="" readonly="readonly"/></td>
			                                        <td><input style="width: 100px;" type="text" name="" value="" readonly="readonly"/></td>
			                                        <td><input style="width: 100px;" type="text" name="" value="" /></td>
			                                        <td><input style="width: 50px;" type="text" name="" value="" readonly="readonly"/></td>
													<td><input style="width: 50px;" type="text" name="" value="" /></td>
			                                        <td><input style="width: 100px;" type="text" name="" value="" /></td>
			                                        <td><input style="width: 80px;" type="text" name="" class="dateControl" id="dateControl" readonly="readonly" /></td>
			                                        <td><input style="width: 80px;" type="text" name="" value="" /></td>
			                                         <td title=""><a class="editBlue cursor" onclick="showDialog()">编辑</a></td>
			                                        <td><input style="width: 80px;" type="text" name="" value="" /></td>
			                                        <td><img src="../../img/button/bgd_print.png"></td>
			                                    </tr>
			                                </tbody>
			                            </table>
			                        </div>
			                        <!-- 确定按钮 -->
			                        <div class="certainBtn">
			                        	<a href="" class="bgd_blue_two img_hand">确定</a> 
			                            <a href="instockList.html" class="bgd_white_two img_hand">返回</a> 
			                        </div>
			                    </div>
			                </div>
						</div>
		            </div>
		        </div>
			</div>
			
			<!-- 版尾  -->
			<div class="ending">
				Copyright© 2019-2020 磐基技术有限公司
			</div>
			
			<!--选择产品用途-->
			<div id="materialUseDialog" class="mask hidden">
							<div class="org_window" style="">
								<p>选择物料用途</p>
								<div class="article_list" style="width: 95%;height: 70%;  margin: 0px auto;overflow-y: scroll;overflow-x: hidden;">
									<!------- 添加内容 ------->
									<div class="content content1">
										<!-- 用户列表内容区 -->
										<div class="con con_01">
											<div class="write_area" style="height: 90%; ">
												<div id="productTree" class="ztree"></div>
											</div>
										</div>
									</div>
								</div>
								<!-- 保存、重置按钮区 -->
								<div align="center" class="btn_submit" style="margin-top: 10px;">
									<a onclick="hideDialog()" class="bgd_blue_two img_hand">确定</a>
									<a onclick="hideDialog()" class="bgd_white_two img_hand">关闭</a>
								</div>
							</div>
						</div>
			
			<!-- 打印二维码 -->
			<div class="mask hidden">
				<div class="printDiv">
					<h4 class="printTitle">
						物料二维码
						<img onclick="backTwocode();" src="../../img/list/delete.png"/>
					</h4>
					<div class="twocodeDiv">
						 <div class="twocodeMoudle">
						 	<img src="../../img/list/twocode.png"/>
						 	<p>物料名称</p>
						 </div>
						 <div class="twocodeMoudle">
						 	<img src="../../img/list/twocode.png"/>
						 	<p>物料名称</p>
						 </div>
						 <div class="twocodeMoudle">
						 	<img src="../../img/list/twocode.png"/>
						 	<p>物料名称</p>
						 </div>
						 <div class="twocodeMoudle">
						 	<img src="../../img/list/twocode.png"/>
						 	<p>物料名称</p>
						 </div>
						 <div class="twocodeMoudle">
						 	<img src="../../img/list/twocode.png"/>
						 	<p>物料名称</p>
						 </div>
						 <div class="twocodeMoudle">
						 	<img src="../../img/list/twocode.png"/>
						 	<p>物料名称</p>
						 </div>
						 <div class="twocodeMoudle">
						 	<img src="../../img/list/twocode.png"/>
						 	<p>物料名称</p>
						 </div>
						 <div class="twocodeMoudle">
						 	<img src="../../img/list/twocode.png"/>
						 	<p>物料名称</p>
						 </div>
						 <div class="twocodeMoudle">
						 	<img src="../../img/list/twocode.png"/>
						 	<p>物料名称</p>
						 </div>
						 <div class="twocodeMoudle">
						 	<img src="../../img/list/twocode.png"/>
						 	<p>物料名称</p>
						 </div>
						 <div class="twocodeMoudle">
						 	<img src="../../img/list/twocode.png"/>
						 	<p>物料名称</p>
						 </div>
						 <div class="twocodeMoudle">
						 	<img src="../../img/list/twocode.png"/>
						 	<p>物料名称</p>
						 </div>
					</div>
					<!-- 确定按钮 -->
                    <div class="certainBtn">
                    	<a href="" class="bgd_blue_two img_hand">确定</a> 
                        <a onclick="backTwocode();" class="bgd_white_two img_hand">返回</a> 
                    </div>
				</div>
			</div>
		</div>
	</body>
	<script src="../../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="../../js/3rd/ztree/jquery.ztree.core.product-3.5.js"></script>
	<script type="text/javascript" src="../../js/3rd/ztree/jquery.ztree.excheck-3.5.js"></script>
	<script type="text/javascript" src="../../js/3rd/ztree/jquery.ztree.exedit-3.5.js"></script>
	<script src="../../js/jquery-ui.js" type="text/javascript"></script>
	<script type="text/javascript">
		var h = document.documentElement.clientHeight;
		$(".wrap").css("height", h);
		
		// 获取每行 td 的兄弟节点
		$("#metailInfo td").hover(   
			function () {      
				$(this).parent().children().addClass("td_hover");
			},    
			function () {      
				$(this).parent().children().removeClass("td_hover");  
			}
		);
		
		// 日期控件
		$(function(){
	        $(".dateControl").datepicker({
	        	dateFormat : 'yy-mm-dd',
	            monthNamesShort:["January","February","March","April","May","June", "July","August","September","October","November","December"],
	 		 	changeYear:true,
	 		 	changeMonth:true,
	 		 	showOn:"button",
	 		 	buttonImage:"../../img/list/calendar.png",
	 		 	buttonImageOnly:false
	        });
	     });
		
		
		//打印二维码
		function addTwocode(){
			$(".mask").css("display", "block");
		}
		//返回增加列表
		function backTwocode(){
			$(".mask").css("display", "none");
		}
		
		//-------- 增加明细 ---------
	    function addDetail() {
	        var trInt = $("#addTr").find("tr").length;
			var no = trInt + 1;// 序号
	        
	        var dom = "<tr class='contentText list_list'><td><input type='checkbox' class='input_checkBox' name='' id='' value=''></td>";
	        dom += "<td>" + no + "</td>";
	        dom += "<td><input style='width: 100px;' type='text' name='' value=''></td>";
	        dom += "<td><input style='width: 100px;' type='text' name='' value='' readonly='readonly'></td>";
	        dom += "<td><input style='width: 100px;' type='text' name='' value='' readonly='readonly'></td>";
	        dom += "<td><input style='width: 100px;' type='text' name='' value='' readonly='readonly'></td>";
	        dom += "<td><input style='width: 100px;' type='text' name='' value='' readonly='readonly'></td>";
	        dom += "<td><input style='width: 100px;' type='text' name='' value=''></td>";
	        dom += "<td><input style='width: 50px;' type='text' name='' value='' readonly='readonly'></td>";
	        dom += "<td><input style='width: 50px;' type='text' name='' value=''></td>";
	        dom += "<td><input style='width: 100px;' type='text' name='' value=''></td>";
	        dom += "<td><input style='width: 80px;' type='text' class='dateControl' name='' value=''></td>";
	              dom += "<td><input style='width: 80px;' type='text' name='' value=''></td>";
	              dom += "<td title=''><a class='editBlue cursor' onclick='showDialog()'>编辑</a></td>";
	        dom += "<td><input style='width: 80px;' type='text' name='' value=''></td>";
	        dom += "<td><img src='../../img/button/bgd_print.png'></tr>";
	        
			$("#addTr").append(dom);
			$(function(){
		        $(".dateControl").datepicker({
		        	dateFormat : 'yy-mm-dd',
		            monthNamesShort:["January","February","March","April","May","June", "July","August","September","October","November","December"],
		 		 	changeYear:true,
		 		 	changeMonth:true,
		 		 	showOn:"button",
		 		 	buttonImage:"../../img/list/calendar.png",
		 		 	buttonImageOnly:false
	        	});
	     	});	        
	        
	    }
		
		//-------- 删除明细 ---------
	    function deleteDetail() {
	        var checks = $("input[type='checkbox']:checked");
	        if (checks.length == 0) {
	            $("#addTr").find("tr:last").remove();
	        } else {
	            $.each(checks, function(item, obj) {
	                $(obj).parent().parent().remove();
	            });
	        }
	    }
	    
	    
	    /* 零部件信息管理 */
		var setting = {
			check: {
				enable: true,
					autoCheckTrigger: true,
				chkboxType:{ "Y": "", "N": "" }
			},
			data: {
	            key:{
	                name:"name"
	            },
	            simpleData: {
	                enable: true,
	                idKey:"id",
	                pIdKey:"pId"
	            }
        	}
		};

		var zNodes =[
			{ id:1, pId:0, name:"产品1", open:true},
			{ id:11, pId:1, name:"零件 1-1"},
			{ id:12, pId:1, name:"零件 1-2"},
			{ id:13, pId:1, name:"零件 1-3"},
			{ id:2, pId:0, name:"产品 2", open:true},
			{ id:21, pId:2, name:"零件 2-1"},
			{ id:22, pId:2, name:"零件 2-2"},
			{ id:3, pId:0, name:"产品 3", open:true},
			{ id:31, pId:3, name:"零件 3-1"},
			{ id:32, pId:3, name:"零件 3-2"},
			{ id:33, pId:3, name:"零件 3-3"},
		];
		
		/* 初始化数据 */
			$.fn.zTree.init($("#productTree"), setting, zNodes);
			$("#productTree img").hide();
			
			function showDialog(){
				$('#materialUseDialog').show()
			}
			
			function hideDialog(){
				$('#materialUseDialog').hide()
			}
	</script>
</html>
